<template>
  <div id="app">
<!--    <transition name="scale" mode="out-in">-->
      <router-view v-if="isRouterAlive"/>
<!--    </transition>-->
  </div>
</template>

<style>
html,body {
  padding: 0;
  margin: 0;
}
#app {
  height: 100vh;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.scale-enter-active,
.scale-leave-active {
  transition: all 0.5s ease;
}


.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}
</style>

<script>
export default {
  name:'App',
  provide(){
    return{
      reload:this.reload
    }
  },
  data(){
    return{
      //isRouterAlive：true/false //true or false 通过isRouterAlive布尔值来控制
      isRouterAlive:true
    }
  },
  methods:{
    reload(){
      this.isRouterAlive=false
      this.$nextTick(function (){
        this.isRouterAlive=true
      })
    }
  }
}

</script>
